<template>
  <div class="Tab">
    <div class="Main_main">
      <div class="Main_tit">
        <p style="font-size: 20px; padding: 10px;"><b>广平县第一人民医院</b></p>
        <ul class="ul_li">
          <li>专科</li>
          <li>特色医院</li>
          <li>社会办医</li>
        </ul><br><br>
        <p style="font-size: 16px">
          西办的中国第一所国立高等医学院校——北京医学专安交通大学第二附属医院(西北医院)、西安交通大学第二临床医学院是国家教育部、国家卫健委直管的集医疗、教学、科研、康复及预防保健为一体的大型综合性医院，国家三级甲等医院。

          医院是1912年由国家教育部创办的中校、
          国立北平大学医学院附属医院发展而来，1937年在全民Ftab1抗战的烽火中，为民族大义，为拯救和保存中国高等医学教育，迁陕重建，奠基并发展了西北地区的高等医学教育和现代临床医学，是西北第一所大学附属医院</p>
        <button @click="toggleExpand" v-if="showButton" class="Main_btn"
          style="width: 100%;height: 7vh; color: green;border: none; background: #fff">{{ isExpanded ? '' : '展开全部'
          }}</button>
        <span class="arrow" :class="{ expanded: isExpanded }"></span> <span class="arrow"
          :class="{ expanded: isExpanded }"></span>
        <div class="content" v-if="isExpanded">
          <p>这是文档的第一段内容。</p>
          <p>这是文档的第二段内容。</p>
          <p>这是文档的第三段内容。</p>
          <p>这是文档的第一段内容。</p>
          <p>这是文档的第二段内容。</p>
        </div>
      </div>

      <div class="lu">
        <p style="font-size: 18px;padding: 5px;"><b>医院地址</b></p>
        <p style="font-size: 16px;margin-left: 15px"><van-icon name="location-o" size="16px" style="padding: 5px;" />
          北京失东城区永定门街道安定社区27号 &ensp;<van-icon name="phone-o" size="16px" /></p>
        <p style="font-size: 15px; padding: 5px;">i忒线北京失东城区永定门街道安
          线北京失东城区永定门街道安定社
          线北京失东城区永定门街道安定社定社区27号北京失东城区永定门街道安定社区27号北京失东
          城区永定门街道安定社区27号北京失东城区永定门街道安定社区27号北京失东城区永定门街道安
          定社区27号北京失东城区永定门街道安定社区27号北京失东城区永定门
          线北京失东城区永定门街道安定社线北京失东城区永定门街道安定社
          线北京失东城区永定门街道安定社线北京失东城区永定门街道安定社街道安定社区27号路</p>

      </div>
      <div class="footer_btn" style="float: left; width: 100%; height: 12vh;">
        <button style="color: green; background-color: #fff;">在线咨询</button>
        <button style="color: #fff;background-color: green">预约挂号</button>
      </div>

    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      isExpanded: false,
      showButton: true
    };
  },
  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
      this.showButton = !this.showButton;
    }
  },
  props: {
    data: Object
  }
};
</script>

<style scoped>
.Tab {
  width: 100%;
  background: #e8e9eb;

  height: 81vh;
  overflow: scroll;
}

.Main_main {
  width: 100%;
  height: 150%;
}

.Main_tit {
  width: 96%;
  background: #fff;
  margin-left: 2%;
  border-radius: 15px;
  overflow: hidden;
}

.ul_li li {
  float: left;
  margin-left: 15px;
  border: 1px solid green;
  color: green;
  border-radius: 5px;
  padding: 3px;
}

.arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #333;
  transition: transform 0.3s ease;
}

.header .arrow.expanded {
  transform: rotate(180deg);
}

.content {
  padding: 10px;
}

.content p {
  margin: 0 0 10px;
}

.lu {
  width: 96%;
  background: #fff;
  margin-left: 2%;
  border-radius: 15px;
  overflow: hidden;
  margin-top: 10px;
}

.footer_btn button {
  border: none;
  width: 44%;
  height: 50%;
  border-radius: 40px;
  font-size: 18px;
  margin-left: 15px;
  z-index: 999;
  border: 1px solid #ccc;

}

.footer_btn {
  position: fixed;
  top: 93%;
  background: #fff;
}
</style>